<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>价格预警管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="container mt-4">
        <h2>价格预警管理</h2>
        
        <!-- 价格预警设置表单 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>设置价格预警</h5>
            </div>
            <div class="card-body">
                <form id="priceAlertForm">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="commodityId" class="form-label">商品ID</label>
                                <input type="number" class="form-control" id="commodityId" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="commodityName" class="form-label">商品名称</label>
                                <input type="text" class="form-control" id="commodityName" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="priceThreshold" class="form-label">价格差异阈值(元)</label>
                                <input type="number" class="form-control" id="priceThreshold" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="alertLevel" class="form-label">预警级别</label>
                                <select class="form-control" id="alertLevel">
                                    <option value="1">轻微</option>
                                    <option value="2">严重</option>
                                    <option value="3">紧急</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">保存设置</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 价格预警列表 -->
        <div class="card">
            <div class="card-header">
                <h5>价格预警列表</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>商品ID</th>
                                <th>商品名称</th>
                                <th>价格差异阈值(元)</th>
                                <th>预警级别</th>
                                <th>启用状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="priceAlertTableBody">
                            <!-- 数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        // API基础URL
        const API_BASE_URL = '/api';
        
        // 页面加载完成后获取价格预警列表
        document.addEventListener('DOMContentLoaded', function() {
            loadPriceAlerts();
            
            // 绑定表单提交事件
            document.getElementById('priceAlertForm').addEventListener('submit', savePriceAlert);
        });
        
        // 加载价格预警列表
        function loadPriceAlerts() {
            axios.get(`${API_BASE_URL}/priceAlert/list`)
                .then(response => {
                    const data = response.data;
                    const tableBody = document.getElementById('priceAlertTableBody');
                    tableBody.innerHTML = '';
                    
                    if (data && data.length > 0) {
                        data.forEach(item => {
                            const row = document.createElement('tr');
                            row.innerHTML = `
                                <td>${item.commodityId}</td>
                                <td>${item.commodityName}</td>
                                <td>${item.priceThreshold}</td>
                                <td>${getAlertLevelName(item.alertLevel)}</td>
                                <td>${item.isEnabled ? '启用' : '禁用'}</td>
                                <td>
                                    <button class="btn btn-sm btn-warning" onclick="editPriceAlert(${item.id})">编辑</button>
                                    <button class="btn btn-sm btn-danger" onclick="deletePriceAlert(${item.id})">删除</button>
                                </td>
                            `;
                            tableBody.appendChild(row);
                        });
                    } else {
                        const row = document.createElement('tr');
                        row.innerHTML = '<td colspan="6" class="text-center">暂无数据</td>';
                        tableBody.appendChild(row);
                    }
                })
                .catch(error => {
                    console.error('加载价格预警列表失败:', error);
                    alert('加载价格预警列表失败');
                });
        }
        
        // 保存价格预警设置
        function savePriceAlert(event) {
            event.preventDefault();
            
            const formData = {
                commodityId: document.getElementById('commodityId').value,
                commodityName: document.getElementById('commodityName').value,
                priceThreshold: document.getElementById('priceThreshold').value,
                alertLevel: document.getElementById('alertLevel').value,
                isEnabled: 1
            };
            
            axios.post(`${API_BASE_URL}/priceAlert/save`, formData)
                .then(response => {
                    alert('保存成功');
                    loadPriceAlerts();
                    document.getElementById('priceAlertForm').reset();
                })
                .catch(error => {
                    console.error('保存失败:', error);
                    alert('保存失败');
                });
        }
        
        // 编辑价格预警
        function editPriceAlert(id) {
            // 这里应该实现编辑功能
            alert('编辑功能待实现，ID: ' + id);
        }
        
        // 删除价格预警
        function deletePriceAlert(id) {
            if (confirm('确定要删除这个价格预警设置吗？')) {
                axios.post(`${API_BASE_URL}/priceAlert/delete/${id}`)
                    .then(response => {
                        alert('删除成功');
                        loadPriceAlerts();
                    })
                    .catch(error => {
                        console.error('删除失败:', error);
                        alert('删除失败');
                    });
            }
        }
        
        // 获取预警级别名称
        function getAlertLevelName(level) {
            switch (level) {
                case 1: return '轻微';
                case 2: return '严重';
                case 3: return '紧急';
                default: return '未知';
            }
        }
    </script>
</body>
</html>